<template>
  <div>
    <el-upload
      action=""
      :accept="accept"
      :class="{ 'hide-upload-btn': hideUploadBtn,'card-head':cardType==='card-head','upLoadIcon':classStyle == 'upLoadIcon'}"
      :auto-upload="false"
      :list-type="listType"
      :modal-append-to-body="false"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :before-upload="beforeAvatarUpload"
      :file-list="fileList"
      :limit="limit"
      :multiple="multiple"
      :on-exceed="onExceed"
      :disabled="disabled"
    >
      <!-- :class="classStyle == '2'?'upLoadIcon':''" -->
      <el-button v-if="listType === 'picture'" size="small" type="primary">点击上传</el-button>
      <p v-if="listType === 'picture-card' && cardType != 'card-head'" class="tips-box">
        <i class="el-icon-circle-plus" />
        <span class="tips-txt">{{ text }}</span>
      </p>
      <div v-if="cardType == 'card-head'" class="right-content">
        <img class="head" src="~@/assets/images/common/head.png" alt="" />
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    defaultFileList: {
      default: () => [],
      type: Array
    },
    limit: {
      type: Number,
      default: 1
    },
    text: {
      type: String,
      default: '上传图片'
    },
    multiple: {
      type: Boolean,
      default: false
    },
    listType: {
      type: String,
      default: 'picture-card'
    },
    cardType: {
      type: String,
      default: 'card'
    },
    accept: {
      type: String,
      default: ''
    },
    returnType: {
      type: String,
      default: 'fileList'
    },
    classStyle: {
      type: String,
      default: 'upLoadNone'
    },
    formKey: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      hideUploadBtn: false
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  watch: {
    defaultFileList: {
      handler(newval, oldval) {
        this.fileList = JSON.parse(JSON.stringify(this.defaultFileList))
        this.hideUploadBtn = this.fileList.length >= this.limit
      },
      immediate: true
    }
  },
  methods: {
    onExceed() {
      this.$message.error('超出文件最大上传数量')
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 10MB!')
      }
      return isLt2M
    },
    handleChange(file, fileList) {
      this.fileList = fileList
      this.hideUploadBtn = fileList.length >= this.limit
      if (this.returnType == 'fileList') {
        this.$emit('changeFile', this.fileList, this.formKey)
      } else {
        this.$emit('changeFile', file, this.formKey)
      }
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
      this.hideUploadBtn = fileList.length >= this.limit
      this.$emit('changeFile', this.fileList, this.formKey)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.hide-upload-btn {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}

.upLoadIcon {
  ::v-deep {
    .el-upload--picture-card {
      width: 48px;
      height: 48px;
      line-height: 55px;
    }

    .tips-box {
      height: 55px;
    }

    .el-upload-list--picture-card .el-upload-list__item {
      width: 48px;
      height: 48px;
    }

    .el-upload-list__item-preview {
      display: none !important;
    }

    .el-upload-list__item-delete {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: Center;
      margin: 0;
    }
  }

}

::v-deep {
  .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    object-fit: cover;
  }

  .el-upload--picture-card,
  .el-upload-list--picture-card .el-upload-list__item {
    width: 80px;
    height: 80px;
    background-color: #F5F6FA;
    border-radius: 0;
  }

  .card-head .el-upload-list--picture-card .el-upload-list__item,
  .card-head .el-upload--picture-card {
    border: none;
    background: #ffffff;
  }

  .card-head .el-upload-list--picture-card .el-upload-list__item {
    border-radius: 50%;
    overflow: hidden;
  }

  .tips-box {
    margin: 0;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #4e5969;

  }

  .el-upload--picture-card i {
    color: #c7ccd3;
  }

  .el-icon-plus {
    font-size: 16px;
    color: #4e5969;
    font-weight: 600;
  }

  .tips-txt {
    display: block;
    color: #4e5969;
    margin-top: 5px;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
  }
}

.right-content {
  height: 100px;
  width: 100px;
  margin: 0 auto;
  position: relative;

  .head {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

}
</style>
